<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-19 20:57:06
 * @LastEditors: charles
 * @LastEditTime: 2021-10-19 21:26:35
-->
<template>
  <div ref="root"></div>
</template>
<script>
import { Line } from '@antv/g2plot';
import {get} from '@/utils/request'
export default {
  data(){
    return {
      plot:null,
      sales: [],
    }
  },
  async mounted(){
    await this.loadSales();
    await this.initChart();
  },
  beforeDestroy(){
    if(this.plot){
      this.plot.destroy();
    }
  },
  methods:{
    // 加载排名数据
    async loadSales() {
      let url = "/statistics/dayOrder";
      let response = await get(url);
      this.sales = response.data.map(item => {
        item.total = + parseInt(item.total)
        return item;
      });

    },
    initChart(){
      let container = this.$refs.root ;
      container.style.height = '190px'
      this.plot = new Line(container, {
        data:this.sales,
        xField: 'day',
        yField: 'total',
        tooltip: {
          formatter: (datum) => {
            return { name: datum.day + "销售额：", value: datum.total + '元' };
          },
        }
      });

      this.plot.render();
    }
  }
}
</script>